// 基于准备好的dom，初始化echarts实例
var myMap = echarts.init(document.getElementById('map'));

option_map = {
    title: {
        text: '点图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [123.4118195, 41.81805976],
        zoom: 13,
        roam: true,
        enableMapClick: false
    },
    visualMap: {
        type: 'piecewise',
        inverse: true,
        top: 10,
        left: 10,
        pieces: [{
            value: 0, label: '午夜商业/住宅区', color: '#e74c3c'
        }, {
            value: 1, label: '工作区', color: '#f1c40f'
        }, {
            value: 2, label: '工作区/商业区', color: '#3498db'
        }, {
            value: 3, label: '边缘区', color: '#2ecc71'
        }, {
            value: 12, label: '边界点', color: 'black'
        }],
        borderColor: '#ccc',
        borderWidth: 2,
        backgroundColor: '#eee',
        dimension: 2,
        inRange: {
            opacity: 0.7
        }
    },
    series: [
        {
            name: '基站',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: function (val) {
                return val[3] / 10;
            },
            encode: {
                tooltip: 2
            },
            emphasis: {
                itemStyle: {
                    color: '#34495e'
                }
            }
        }
    ]
};

// ----------------------- 以下为数据处理部分 -----------------------

// 全局变量
let tempArray = [];
let originData = [];
let finalData = [];

// 先从数据库获取originData
$.ajax({
    type: "GET",
    url: '/BaseStationType',
    cache: false,
    success: function (res) {
        originData = res;

        // 将originData分组放进tempArray中，每组100条数据
        let temp = [];
        for (let i = 0; i < originData.length; i++) {
            temp.push([originData[i].longitude, originData[i].latitude]);
            if (i % 100 == 99 || i == originData.length - 1) {
                tempArray.push(temp);
                temp = [];
            }
        }

        // 利用接口转换坐标
        genFinalData(0, tempArray.length);
    }
});

function genFinalData(index, length) {
    let temp = tempArray[index].join(';');
    // 利用百度接口转换坐标
    $.ajax({
        type: "GET",
        url: "http://api.map.baidu.com/geoconv/v1/?coords=" + temp + "&from=3&to=5&ak=SipXZFGUXfBvDr88wUQHGdwhP06tY5Bz",
        dataType: "jsonp",
        cache: false,
        success: function (res) {
            for (let j = 0; j < res.result.length; j++) {
                finalData.push([res.result[j].x, res.result[j].y, originData[index * 100 + j].type, 80]);
            }
            if (++index != length) {
                // 为解决ajax异步问题使用递归
                genFinalData(index, length);
            } else {
                // 所有坐标都转换完成后生成point数据画出像素图
                DrawPoints();
                // 结束递归
                return;
            }
        }
    });
}

function DrawPoints() {
    finalData.push(
        [123.30603424257413, 41.742959589335406, 12, 100],
        [123.54058735124023, 41.89321074219711, 12, 100],
        [123.30603424257413, 41.89321074219711, 12, 100],
        [123.54058735124023, 41.742959589335406, 12, 100]);
    option_map.series[0].data = finalData;
    myMap.setOption(option_map);
}